<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-if="list.length===0">
            购物车空空如也
        </div v-else>
        <ul>
            <input type="checkbox" v-model="isall" @change='kk' @change='jiance'>全选
            <li v-for="(item,index) in list" :key='item.id'>

                <input type="checkbox" :value='item' v-model="aad" @change='jiance'>
                <img :src="item.img" alt="">
                <div>名称:{{item.name}}</div>
                <div>价格:{{item.price}}</div>
                <div>
                    <button @click='item.number--' :disabled='item.number===0'>-</button>
                    {{item.number}}
                    <button @click='item.number++' :disabled='item.number===item.limit'>+</button>
                </div>
                <button @click='del(index)' @change='jiance'>删除</button>
            </li>
            <div style="background-color: blue;">总金额:{{sun()}}</div>
        </ul>

    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        methods: {
            jiance() {
                if (this.aad.length === this.list.length) {
                    this.isall = true
                } else {
                    this.isall = false
                }
            },
            kk() {
                if (this.isall) {
                    this.aad = this.list
                } else {
                    this.aald = []
                }
            },
            del(i) {
                this.list.splice(i, 1)
                this.jiance()
            },
            sun() {
                let sum = 0
                this.aad.forEach(item => {
                    sum += item.price * item.number
                })
                return sum
            }
        },
        el: '#app',
        data() {
            return {
                isall: false,
                aad: [],
                list: [
                    {
                        name: '商品1 ',
                        price: 10,
                        number: 1,
                        id: 1,
                        limit: 5,
                        img: '../../html/imgaes/6.jpg'
                    },
                    {
                        name: '商品2 ',
                        price: 20,
                        number: 1,
                        id: 2,
                        limit: 5,
                        img: '../../html/imgaes/6.jpg'
                    },
                    {
                        name: '商品3 ',
                        price: 30,
                        number: 1,
                        id: 3,
                        limit: 5,
                        img: '../../html/imgaes/6.jpg'
                    }
                ]
            }
        },
    })
</script>

</html>